import React from 'react'

import App from '../../common/App.jsx'
import U from '../../common/U.jsx'
import ImgEditor from "../../common/ImgEditor";
import BreadcrumbCustom from "../BreadcrumbCustom";

import {message, Select, Button, Card, Modal} from 'antd'
import CTYPE from "../../common/CTYPE";
import Utils from "../../common/U";
import '../../assets/css/banner/banner-edit.less'

const Option = Select.Option;

export default class BannerEdit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            actions: [{
                "key": "none",
                "name": "无"
            },
                {
                    "key": "link",
                    "name": "链接"
                }],
            list: [],
            banner: {},
            banners: [],
            show_imgEditor: false,
        };
    }

    componentDidMount() {
        App.api('usr/home/data').then(({banners}) => {
            this.setState({
                banners: banners || [],
            })
        });
    }

    showImgEditor = (val) => {
        this.setState({
            show_imgEditor: val ? val : false
        })
    };

    handleImgSaved = (url) => {
        let banner = this.state.banner;
        let banners = this.state.banners;
        this.setState({
            banner: {
                ...banner,
                img: url
            }
        })
    };

    doSave = () => {
        let _this = this;
        let banner = _this.state.banner;
        let banners = this.state.banners;
        let {img, act, payload = {}} = banner;

        if (U.str.isEmpty(img)) {
            message.warn('请上传图片');
            return;
        }

        if (act === 'link' && U.str.isEmpty(payload.url)) {
            message.warn('请填写跳转地址');
            return;
        }
        banners.push(banner);
        this.setState({
            banners,
            banner: {
                act: 'none', payload: {id: 0, title: '', url: ''}, img: '',
            }
        });

    };

    handleRemove = (index) => {
        Modal.confirm({
            title: '提示',
            content: '是否删除当前?',
            onOk: () => {
                let banners = this.state.banners;
                this.setState({
                    banners: banners.filter((item, i) => i != index)
                })
            }
        });

    };


    doSaveBanners = () => {
        App.api('adm/banner/save', {
            list: JSON.stringify(this.state.banners),
        }).then(() => {
            message.success('增加成功');
        })
    };

    render() {
        let _this = this;
        let banner = this.state.banner;
        let {act = 'none', payload = {id: 0, title: '', url: ''}, img} = banner || {};
        let showLink = act === 'link';
        let showPicker = act !== 'none' && act !== 'link';
        let actions = _this.state.actions;
        let list = this.state.list;
        let banners = this.state.banners;

        return <div className="banner-page">
            <BreadcrumbCustom first="内容管理" second="轮播图"/>
            <Card>

                <div className="common-edit-page banner-edit">

                    {this.state.show_imgEditor &&
                    <ImgEditor showImgEditor={this.showImgEditor} aspectRatio={CTYPE.imgeditorscale.rectangle_h}
                               namespace={''} url={img} handleImgSaved={this.handleImgSaved}/>}

                    <div className="upload-img-h" onClick={_this.showImgEditor}>
                        {img && <img src={img} className="img"/>}
                    </div>


                    <p>跳转类型</p>
                    <Select
                        showSearch
                        style={{width: 360}}
                        optionFilterProp="children"
                        value={act}
                        onChange={(act) => {
                            let _b = actions.find(b => b.key === act);
                            _this.setState({
                                banner: {
                                    ...banner,
                                    act,
                                    payload: {title: _b.name}
                                }
                            })
                        }}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                        {actions.map((act) => {
                            return <Option key={act.key}>{act.name}</Option>
                        })}
                    </Select>


                    {showLink && <div>
                        <p className="required">跳转链接</p>
                        <textarea className="textarea" placeholder="输入跳转链接"
                                  value={payload.url}
                                  onChange={(e) => {
                                      _this.setState({
                                          banner: {
                                              ...banner,
                                              payload: {url: U.str.trim(e.target.value)}
                                          }
                                      })
                                  }}/>
                    </div>}

                    <div style={{marginBottom: 15}}>
                        <Button type="primary" onClick={_this.doSave}>添加</Button>
                    </div>
                    <ul className='banners'>
                        {banners && banners.length > 0 && banners.map((b, i) => {
                            let act = '';
                            if (b.act === 'none') {
                                act = '不跳转';
                            } else if (b.act === 'link') {
                                act = '跳转链接';
                            }

                            return <li className='banner' key={i}>
                                <div className='img'><img src={b.img}/>
                                    <i className='close' onClick={() => this.handleRemove(i)}/>
                                </div>
                                <p>
                                    跳转：{act}
                                </p>
                            </li>
                        })}
                    </ul>
                </div>
            </Card>
            <Card>
                <div className="save">
                    <Button type="primary" onClick={_this.doSaveBanners}>保存</Button>
                </div>
            </Card>
        </div>
    }
}
